<!--
 * @Description: 
 * @version: 
 * @Author: wyx
 * @Date: 2020-09-21 17:48:32
 * @LastEditDate: Do not exit
-->
<template>
  <div>
      <div class="top">
          <el-form :inline="true" :model="goodsForm" class="demo-form-inline">
            <el-form-item>
                <el-button type="primary" @click="addGoods" size="small"><i class="el-icon-edit-outline"></i>添加商品</el-button>
            </el-form-item>
            <el-form-item label="商品ID">
                <el-input v-model="goodsForm.id" placeholder="请输入商品ID" size="small"></el-input>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="goodsForm.title" placeholder="请输入商品名称" size="small"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" @click="getBy"><i class="el-icon-search"></i>查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" @click="reset"><i class="el-icon-search"></i>重置</el-button>
            </el-form-item>
        </el-form>
      </div>

      <el-table
        :data="goodsData"
        style="width: 100%">
        <el-table-column type="expand">
        <template slot-scope="props">
            <el-form label-position="left" class="demo-table-expand">
            <el-form-item label="子标题">
                <span>{{ props.row.subtitle }}</span>
            </el-form-item>
            <el-form-item label="子图">
                <!-- <span>{{ props.row.subImages }}</span> -->
                <span v-for="item in getImg(props.row.subImages)" :key="item">
                    <img style="height:80px;margin-right:10px;" :src="item">
                </span>
            </el-form-item>
            <el-form-item label="产地">
                <span>{{ props.row.originalPlace }}</span>
            </el-form-item>
            <el-form-item label="细节描述">
                <span>{{ props.row.detail }}</span>
            </el-form-item>
            <el-form-item label="规格参数">
                <span>{{ props.row.specifications }}</span>
            </el-form-item>
            </el-form>
        </template>
        </el-table-column>
        <el-table-column label="商品 ID" prop="id" width="180px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="商品名称" prop="title" width="120px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="主图" prop="mainImage">
            <!-- 图片的显示 -->
                 <template slot-scope="scope">            
                    <img :src="scope.row.mainImage"  height="70" />
                 </template>  
        </el-table-column>
        <el-table-column label="品牌" prop="brand.displayName"></el-table-column>
        <el-table-column label="现价" prop="nowPrice"></el-table-column>
        <el-table-column label="原价" prop="originalPrice"></el-table-column>
        <el-table-column label="库存" prop="stock"></el-table-column>
        <el-table-column label="销量" prop="platinum"></el-table-column>
        <el-table-column label="状态" prop="status.displayName"></el-table-column>
        <el-table-column label="创建日期" prop="createDate" width="160px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="操作" width="160px" fixed="right">
            <template slot-scope="scope">
                <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="keyword.currentPage"
      :page-size="keyword.pageSize"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>

    <!-- 对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <el-form :model="goods" label-width="100px" class="demo-ruleForm">
          <el-row>
              <el-col :span="12">
                <el-form-item label="商品类别" prop="categoryId">
                    <el-cascader :options="options" :show-all-levels="false" :props="props" v-model="goods.categoryId"></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商品名称" prop="title">
                    <el-input v-model="goods.title"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                <el-form-item label="副标题" prop="subtitle">
                    <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="goods.subtitle"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="主图" prop="mainImage">
                    <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8008/goods-service/goods/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
            <el-form-item label="子图" prop="subImage">
                <el-upload
                    action="http://localhost:8008/goods-service/goods/upload"
                    list-type="picture-card"
                    :auto-upload="true"
                    :on-success="handleImageSuccess"
                    :before-upload="beforeImageUpload"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="visible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
          </el-row>
          <el-row>
              <el-col :span="12">
                <el-form-item label="产地" prop="originalPlace">
                    <el-input placeholder="请输入内容" v-model="goods.originalPlace"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="品牌" prop="brand">
                    <el-select v-model="goods.brand" placeholder="请选择">
                        <el-option
                        v-for="item in brands"
                        :key="item.code"
                        :label="item.displayName"
                        :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                <el-form-item label="细节描述" prop="detail">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="goods.detail"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规格参数" prop="specifications">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="goods.specifications"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                <el-form-item label="原价" prop="originalPrice">
                    <el-input v-model="goods.originalPrice"><template slot="append">元</template></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="现价" prop="nowPrice">
                    <el-input v-model="goods.nowPrice"><template slot="append">元</template></el-input>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                <el-form-item label="库存" prop="stock">
                    <el-input v-model="goods.stock"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最多购买数量" prop="maxBuyCount">
                    <el-input v-model="goods.maxBuyCount"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" size="medium" @click="submit">提 交</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {getGoodsPage,insert,removeById,update} from "@/api/goods.js"
import {getBrands} from "@/api/common.js" 
import {getCategory} from "@/api/category.js"

export default {
    data(){
        return{
            goodsForm:{},
            goodsData:[],
            keyword:{
              currentPage:1,
              pageSize:4,
            },
            total:0,
            props: {
              value: "id",
              label: "categoryName",
            },
            dialogVisible:false,
            visible:false,
            disabled: false,
            dialogImageUrl: "",
            goods:{brand:{name:''}},
            imageUrl: '',
            options:[],
            brands:[],
            title:"添加商品",
            subArr:[],
            head:"https://zpl-1303223223.cos.ap-beijing.myqcloud.com",
            cid:"",

        }
    },
    created(){
        this.loadBrands();
        this.loadData();
        this.loadCate();
    },
    methods:{
        handleSizeChange(val) {
            this.keyword.pageSize=val;
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.keyword.currentPage=val;
            this.loadData(false);
            // console.log(`当前页: ${val}`);
        },
        handleClose(){
          this.dialogVisible=false;
        },
        addGoods(){
            this.goods={};
            this.title="添加商品";
            this.dialogVisible=true;
        },
        handleAvatarSuccess(res, file) {
            console.log(res,file);
            // this.imageUrl = URL.createObjectURL(file.raw);
            this.imageUrl=this.head+res.msg;
        },
        // 上传成功
        handleImageSuccess(res,file){
            console.log(res,file);
            this.dialogImageUrl+=res.msg+",";
            // console.log(this.dialogImageUrl);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        // 上传前
        beforeImageUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);

        },
            // 预览对主框
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
            },
        loadData(val){
            if(val){
                this.keyword.currentPage=1;
            }
            getGoodsPage(this.keyword).then(res=>{
                if(res.data.code==="0000"){
                    this.goodsData=res.data.data.records;
                    for(let i=0;i<this.goodsData.length;i++){
                        this.goodsData[i].mainImage=this.head+this.goodsData[i].mainImage;
                    }
                    for(let i=0;i<this.goodsData.length;i++){
                        this.subArr[i]=this.goodsData[i].subImages;
                    }
                    // console.log(this.subArr);

                    this.total=res.data.data.total;
                }
            })
        },
        loadBrands(){
            getBrands().then(res=>{
                if(res.data.code==="0000"){
                    this.brands=res.data.data;
                }
            })
        },
        loadCate(){
            getCategory().then(res=>{
                if(res.data.code==="0000"){
                    this.options=res.data.data;
                }
            })
        },
        submit(){
            if(this.title=="添加商品"){
                this.goods.categoryId=this.goods.categoryId[1];
                this.goods.status="RU";
                this.goods.mainImage=this.imageUrl;
                this.goods.subImages=this.dialogImageUrl;
                console.log(this.goods)
                insert(this.goods).then(res=>{
                    if(res.data.code==="0000"){
                        this.$message.success(res.data.msg);
                        this.dialogVisible=false;
                    }
                })
            }
            else if(this.title=="修改商品"){
                this.goods.id=this.cid;
                this.goods.categoryId=this.goods.categoryId[1];
                this.goods.mainImage=this.imageUrl;
                this.goods.subImages=this.dialogImageUrl;
                update(this.goods).then(res=>{
                    if(res.data.code==="0000"){
                        this.$message.success(res.data.msg);
                        this.dialogVisible=false;
                    }
                })
            }
            
        },
        getBy(){
            this.goodsForm.currentPage=this.keyword.currentPage;
            this.goodsForm.pageSize=this.keyword.pageSize;
            getGoodsPage(this.goodsForm).then(res=>{
                if(res.data.code==="0000"){
                    // console.log(res.data.data)
                    this.goodsData=res.data.data.records;
                    for(let i=0;i<this.goodsData.length;i++){
                        this.goodsData[i].mainImage=this.head+this.goodsData[i].mainImage;
                    }
                    for(let i=0;i<this.goodsData.length;i++){
                        this.subArr[i]=this.goodsData[i].subImages;
                    }
                }
            })
        },
        handleEdit(index,row){
            this.title="修改商品";
            this.dialogVisible=true;
            this.goods=row;
            this.cid=row.id;
        },
        handleDelete(index,row){
            removeById(row.id).then(res=>{
                if(res.data.code==="0000"){
                    this.$message.success(res.data.msg);
                    this.loadData();
                }
            })
        },
        reset(){
            this.loadData();
        },
        removeFile(file){
            console.log(file)
        },
        getImg(val){
            val=val.substring(0,val.length-1);
            let words=val.split(',');
            // console.log(words);
            for(let i=0;i<words.length;i++){
                words[i]=this.head+words[i];
            }
            return words;
        },

    }

}
</script>

<style scoped>
.top{
    margin-top: 10px;
}
.avatar-uploader .el-upload {
    border: 1px solid #141313;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #2f3338;
    border: 1px dashed #b9b4b4;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>